<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit('create')">{{$t('table.add')}}</el-button>
  	</div>

    <div class="tab-container">
      <el-tabs v-model="activeName" type="border-card" @tab-click="getList">
        <el-tab-pane v-for="item in categoryOptions" :label="item.label" :key="item.value" :name="item.label">
          <keep-alive>
            <!-- <tab-pane v-if="activeName==item.key" :type="item.key"/> -->

              <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                >
                <el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
                  <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.name')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('table.image')" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.full_image" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.item_id')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.item_id }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.category')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.category?scope.row.category.title:'' }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.cost_money')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.cost_money }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.cost_coin')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.cost_coin }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('goods.cost_diamond')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.cost_diamond }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('table.actions')" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit('update', scope.row)">{{ $t('table.edit') }}</el-button>
                    <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 85%; margin-left:50px;">
        <el-form-item :label="$t('goods.name')" prop="name">
          <el-input v-model="temp.name"/>
        </el-form-item>
        <el-form-item :label="$t('table.image')" prop="image">
          <dropzone id="myVueDropzone" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
        </el-form-item>
        <el-form-item :label="$t('category.description')" prop="description">
          <el-input type="textarea" v-model="temp.description"></el-input>
        </el-form-item>
        <el-form-item :label="$t('goods.item_id')" prop="item_id">
          <el-input v-model="temp.item_id"/>
        </el-form-item>
        <el-form-item :label="$t('goods.cost_money')" prop="cost_money">
          <el-input v-model="temp.cost_money"/>
        </el-form-item>
        <el-form-item :label="$t('goods.cost_coin')" prop="cost_coin">
          <el-input v-model="temp.cost_coin"/>
        </el-form-item>
        <el-form-item :label="$t('goods.cost_diamond')" prop="cost_diamond">
          <el-input v-model="temp.cost_diamond"/>
        </el-form-item>
        <el-form-item :label="$t('goods.category')" prop="jump_type">
          <el-select v-model="temp.category_id" :selected="temp.category_id" class="filter-item" placeholder="Please select">
            <el-option v-for="item in categoryOptions" :key="item.key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="editData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>


</div>
</template>

<script>

import { fetchList } from '@/api/goods'
import { fetchList as fetchCategories } from '@/api/category'
import waves from '@/directive/waves' 
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Dropzone from '@/components/Dropzone'

export default {
  components: { Pagination,Dropzone },
	directives: { waves },
	data() {
		return {
      resource:'goods',

      //tab
      activeName:'All',
      categoryOptions:[
      {label :'All',value:0} 
      ],

       //list data
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '-id',
        category_id:0
      },


      //edit data
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit Goods',
        create: 'Add Goods'
      },
		}
	},
	created() {
		fetchCategories({
      type: 1
    }).then(response => {
      response.data.data.forEach(item=>{
        this.categoryOptions.push({
          label:item.title,
          value:item.id
        })
      })

      this.getList()
    })
	},
	methods: {
      getList() {
        helper.setTabQuery(this.categoryOptions,'category_id',this)

        helper.getList(fetchList,this);
      },
      getDefaultTemp() {
        return {
          id: undefined,
          name: '',
          image: '',
          description: '',
          item_id: '',
          cost_money: 0,
          cost_coin: 0,
          cost_diamond: 0,
        };
      },
      handleEdit(type,row){
        helper.handleEdit(type, row, this);
      },
      handleDelete(row){
        helper.handleDelete(this.resource, row ,this);
      },
      editData(){
        helper.updateResource(this.resource,this.temp,this)
      },
      dropzoneS(response) {
        this.temp.image=response.result.image
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        this.$message({ message: 'Delete success', type: 'success' })
      },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
  },
}
</script>
